<template>
    <div class="login">
      <div class="title"><h3>登录页</h3></div>
      <van-form @submit="login">
        <van-field
          v-model="formData.phone"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号',pattern:/^1[3-9]\d{9}$/ }]"
        />
        <van-field
          v-model="formData.pass"
          type="password"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码',pattern:/^\d{4}$/ }]"
        />
        <div class="btn" >
          <van-button round block type="info" native-type="submit">登陆</van-button>
        </div>
      </van-form>
    </div>
  </template>
  
  <script>
  import { Toast } from 'vant';
  import {user_login} from '../utils/api'
  export default {
      data(){
          return{
              formData:{phone:'',pass:''}
          }
      },
      methods:{
      login(){
        user_login(this.formData).then((res)=>{
          if(res.data.code == 200){
              localStorage.setItem('token',res.data.token);
              localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo));
              this.$router.push('/');
              Toast.success('登陆成功!')
          }else{
            Toast.fail('登陆失败!')
          }
        })
      }
    }
  
  };
  </script>
  
  <style lang="scss" scoped>
  .login{
      margin: 20px 10px;
  }
  .title{
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
  }
  .van-field{
      margin: 30px 0;
      border: 1px solid #ccc;
      border-radius: 20px;
  }
  .btn{
      background: #ccc;
      border-radius: 20px;
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      font-size: 20px;
      text-align: center;
  }
  </style>